<template>
	<view class="page-container">
		
		<!--返回-->
		<image src="/static/image/return.png" @click="returnPage" class="return"></image>
	    
		<!--跳转公海馆-->
		<view class="nav-list hig-seas">
			<u-icon name="gonghai" custom-prefix="qxl-icon" color="#ffffff" size="34"></u-icon>
			<text>公海馆</text>
		</view>
		
		<!--船GIF-->
		<image src="/static/image/ship.gif" style="width: 300rpx;left:5%;top:32%" mode="widthFix" class="lanwans"></image>
		
		<!--气球GIF-->
		<image src="/static/image/balloon.gif" style="width: 300rpx;left:60%;top:15%" mode="widthFix" class="lanwans"></image>
		
		<view class="hig-bg">
			<view style="height: 100px;"></view>
			<scroll-view v-if="scrollHeight > 0"
			class="scroll-Y" 
			scroll-y="true" 
			:style="{height: scrollHeight+'px'}">
			
			<view class="list-box">
				<view class="disf pb10 f32">
					   <image src="/static/image/xxxx.png" style="width: 100rpx;height: 100rpx;flex-shrink: 0;"></image>
					   <view style="width: 600rpx;">
						   <view class="b disfr-lr">
							   <view>我是一个好</view>
							   <view>
								   <!--<u-icon name="arrow-right" color="#999999" 
								   style="position: relative;top:-5rpx;"></u-icon>-->
								</view>
							</view>
					       <view class="disfr-lr">
							  <view class="sex">
								  <u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
								  <text class="ml5">女</text>
							  </view>
							  <view class="col999 f28">2025-12-02 12:00</view>
						   </view>
					   </view>
				</view>
				<view class="pt20">
					<view style="font-size: 32rpx;">她说：还在漂泊中...</view>
					<!--<view class="mt20"><image src="/static/image/olp.jpg"  mode="heightFix"></image></view>-->
				</view>
				<view class="pt20 pb20 disfr-lr">
					<view>评论(300)</view>
					<view @click="showInput">回复</view>
				</view>
				<view style="height: 30rpx;border-top: 1px solid #ccc;"></view>
				
				<view class="reply-list pb20">
					<view class="disfr-lr">
						<view class="disfr-lr">
							<view>
								<image src="/static/image/xxxx.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"></image>
							</view>
							<view style="width:590rpx">
								<view class="disfr-lr">
									<view class="pr" style="top:5rpx;">我是一个好人</view>
									<view class="col999">2025-08-12<text @click="showInput" class="ml20 col666">回复</text></view>
								</view>
								<view class="mt10 col666">这个是真的不错哦！！！</view>
								<view class="reply-list2 mt10">
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="reply-list pb20">
					<view class="disfr-lr">
						<view class="disfr-lr">
							<view>
								<image src="/static/image/xxxx.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"></image>
							</view>
							<view style="width:590rpx">
								<view class="disfr-lr">
									<view class="pr" style="top:5rpx;">我是一个好人</view>
									<view class="col999">2025-08-12<text @click="showInput" class="ml20 col666">回复</text></view>
								</view>
								<view class="mt10 col666">这个是真的不错哦！！！</view>
								<view class="reply-list2 mt10">
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="list-box">
				<view class="disf pb10 f32">
					   <image src="/static/image/xxxx.png" style="width: 100rpx;height: 100rpx;flex-shrink: 0;"></image>
					   <view style="width: 600rpx;">
						   <view class="b disfr-lr">
							   <view>我是一个好</view>
							   <view>
								   <!--<u-icon name="arrow-right" color="#999999" 
								   style="position: relative;top:-5rpx;"></u-icon>-->
								</view>
							</view>
					       <view class="disfr-lr">
							  <view class="sex">
								  <u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
								  <text class="ml5">女</text>
							  </view>
							  <view class="col999 f28">2025-12-02 12:00</view>
						   </view>
					   </view>
				</view>
				<view class="pt20">
					<view style="font-size: 32rpx;">她说：还在漂泊中...</view>
					<view class="mt20"><image src="/static/image/olp.jpg"  mode="heightFix"></image></view>
				</view>
				<view class="pt20 pb20 disfr-lr">
					<view>评论(300)</view>
					<view @click="showInput">回复</view>
				</view>
				<view style="height: 30rpx;border-top: 1px solid #ccc;"></view>
				
				<view class="reply-list pb20">
					<view class="disfr-lr">
						<view class="disfr-lr">
							<view>
								<image src="/static/image/xxxx.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"></image>
							</view>
							<view style="width:590rpx">
								<view class="disfr-lr">
									<view class="pr" style="top:5rpx;">我是一个好人</view>
									<view class="col999">2025-08-12<text @click="showInput" class="ml20 col666">回复</text></view>
								</view>
								<view class="mt10 col666">这个是真的不错哦！！！</view>
								<view class="reply-list2 mt10">
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
									<view class="disf">
										<view>
											<image src="/static/image/xxxx.png" class="pr"
											style="width: 50rpx;height: 50rpx;flex-shrink: 0;top:-5rpx;"></image>
										</view>
										<view class="ml10">这个是真的不错哦这个是真的不错</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			
			<view style="height: 20px;"></view>
			</scroll-view>
		</view>
		<!--评论-->
		<u-popup v-model="showcomment" mode="bottom" width="100%" height="140rpx">
			<view class="disf mt20" style="padding: 10rpx 30rpx 30rpx;">
				<input type="text" v-model="inputContent" style="width: 560rpx;border-radius: 20px;background:#f4f4f4;height: 80rpx;text-indent: 30rpx;" placeholder="输入评论内容~~~"/>
				<view class="custom-min-button ml10" style="height: 70rpx;width: 120rpx;line-height: 70rpx;font-size:32rpx;text-align: center;border-radius: 6px;">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

//页面加载时
const not_load=ref(false);
const scrollHeight=ref(0);
onLoad(async (options)=>{
	uni.getSystemInfo({
		success: (res) => {
			  scrollHeight.value=res.windowHeight - 100;
		}
	});
	//loadPage({},false);
});
//页面显示时执行
onShow(()=>{

});

const loadPage= async (options,isPage)=>{
	let ret = await uni.$get('/appapi-article-accord',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	not_load.value=true;
	content.value=ret.data.cn_content1;
	app_name.value=ret.data.app_name;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
const goPage=(e)=>{
	uni.$utils.dataSetPage(e);
};

// 私聊用户
const fishUser=async(e)=>{
	
};
//返回上一页
const returnPage=()=>{
	uni.navigateBack({data:1});
};
//评论
const showcomment=ref(false);
const inputContent=ref('');
const showInput=(e)=>{
	showcomment.value=true;
};
</script>

<style lang="scss">
	page,.hig-bg {
	  position: fixed; /* 固定定位 */
	  top: 0;
	  left: 0;
	  width: 100%;    /* 宽度100% */
	  height: 100%;   /* 高度100% */
	  background-image: url('/static/image/drift-bg2.gif'); /* 图片路径 */
	  background-size: cover;      /* 关键：覆盖整个容器 */
	  background-position: center; /* 居中显示 */
	  background-repeat: no-repeat; /* 禁止重复 */
	  z-index: 0;
	}
	.hig-bg{background-image:none;background: rgba(0,0, 0,0.4);}
	.return{
		width: 65rpx;
		height: 65rpx;
		position: fixed;
		top:110rpx;
		left:40rpx;
		z-index: 2;
	}
	.hig-seas{
		position: fixed;
		margin-top: 0 !important;
		margin-right: 0 !important;
		height: 70rpx !important;
		line-height: 70rpx !important;
		top:100rpx;
		right:40rpx;
		z-index: 2;
	}
	.lanwans{
		position: fixed;
		left:30%;
		top:35%;
		z-index: -1;
	}
	.nav-list{
		width: 190rpx;
		height: 80rpx;
		margin-right: 12rpx;
		margin-top: 30rpx;
		border-radius: 6px;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
	}
	.content{
		/*color:#fff;*/
		position: fixed;
		width: 100%; 
		height: 100%;
		z-index: 3;
		top:0;
		left:0;
	}
	.list-box{
		background: rgba(255,255, 255,0.8);
		width: 680rpx;
		margin: 20rpx auto;
		border-radius: 6px;
		padding: 20rpx;
	}
	.sex{
		display: inline-block;
		width: 100rpx;
		height: 40rpx;
		border-radius: 4px;
		color:#fff;
		text-align: center;
		line-height: 40rpx;
		background: #fa3534;
	}
	.sex2{
		background: #19be6b;
	}
	.reply-list2{
		background: rgba(255,255, 255,0.3);
		border-radius: 6px;
		padding: 20rpx;
		color:#666666;
	}
</style>
